<!--
 @Description:上市时间分析报表
 @fileName MarketTimeReport.vue
 @author zengqiongying
 @created 2023/06/03 13:25:23
-->
<template>
  <div>
    <div class="dis-flex search-bar">
      <div class="activePageName">上市时间分析</div>
      <div class="flex-full">
        <el-radio-group v-model="formData.categoryName">
          <el-radio
            v-for="item in categoryList"
            :key="item.dictName"
            :label="item.dictName"
          >{{ item.dictName }}</el-radio>
        </el-radio-group>

        <el-date-picker
          v-model="months"
          type="monthrange"
          value-format="yyyy-MM"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          @change="changeMonth"
        />
      </div>
      <div class="btns">
        <el-button :loading="isExporting" size="mini" type="primary" @click="handleExport">导出数据</el-button>

      </div>
    </div>
    <table-box
      v-loading="isDataLoad"
      :data="tableData"
      :table-config="tableConfig"
      :table-span-method="tableSpanMethod"
      :border="true"
      :show-page="false"
    >
      <el-table-column
        v-for="(prop,i) in tableHeadData"
        :key="i"
        :prop="prop"
        :label="prop"
        :min-width="i<2?150:80"
        :align="i===0?'left':'center'"
        :header-align="i===0?'left':'center'"
      >

        <template slot-scope="scope">
          <span v-if="['上市时间','销量','合计','占比'].includes(prop)">{{ scope.row[prop] }}</span>
          <span
            v-else
            :class="{
              'green':scope.row.status && scope.row.status[prop]==='1',
              'red':scope.row.status && scope.row.status[prop]==='-1',
            }"
          >
            <template v-if="scope.row.status &&scope.row.status[prop]">
              <span v-if="scope.row.status[prop]==='1'"> ↑</span>
              <span v-if="scope.row.status[prop]==='-1'"> ↓</span>
            </template>
            {{ scope.row[prop] }}
          </span>
        </template>
      </el-table-column>
    </table-box>
  </div>
</template>
<script>
import { queryMarketTimeReport } from '@/api/display/recommendReport'
import SearchMixin from './mixins/Search'
import TableDataMixin from './mixins/TableData'
export default {
  name: 'MarketTimeReport',
  mixins: [SearchMixin, TableDataMixin],
  data() {
    return {
      exportName: '上市时间分析',
      exportUrl: '/api/v1/displaySoftSaleNum/marketTimeReportExport'
    }
  },
  created() {

  },
  methods: {
    async queryTableData() {
      await queryMarketTimeReport(this.formData).then(res => {
        this.resetTableData(res.data, '上市时间')
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
